<template>
    <el-drawer
        v-model="isDrawerVisible"
        title="商家详情"
        :with-header="true"
        direction="rtl"
        size="25%"
        :custom-class="'detail-drawer'"
    >
        <!-- 统一使用一个卡片容器 -->
        <el-card class="detail-container" shadow="hover">
            <!-- 商家基本信息 -->
            <div class="shop-info">
                <h3 class="shop-name">{{ shangjia.name }}</h3>
                <div class="shop-meta">
                    <span class="meta-item">商家ID: {{ shangjia.sjid }}</span>
                    <span class="meta-item">用户ID: {{ shangjia.yhid }}</span>
                </div>
            </div>

            <!-- 分隔线 -->
            <div class="divider"></div>

            <!-- 商家费用信息 -->
            <el-descriptions
                direction="vertical"
                :column="1"
                size="large"
                class="fee-descriptions"
            >
                <el-descriptions-item label="起送费">{{ shangjia.qsf }}</el-descriptions-item>
                <el-descriptions-item label="配送费">{{ shangjia.psf }}</el-descriptions-item>
                <el-descriptions-item label="打包费">{{ shangjia.dbf }}</el-descriptions-item>
            </el-descriptions>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" @click="isDrawerVisible = false">关闭</el-button>
            </div>
        </el-card>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const shangjia = ref({
    sjid: '',
    yhid: '',
    name: '',
    qsf: '',
    psf: '',
    dbf: ''
})

// 接收父组件传递过来的对象数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    shangjia.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>
/* 抽屉样式 */
.detail-drawer {
    background-color: #f9f9f9;
}

/* 主容器卡片 */
.detail-container {
    height: 100%;
    border-radius: 8px;
    border-left: 4px solid #f58147; /* 主题色边框 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 商家信息区域 */
.shop-info {
    padding: 15px 20px;
}

.shop-name {
    color: #f58147; /* 主题色文字 */
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.shop-meta {
    display: flex;
    flex-wrap: wrap;
    color: #606266;
    font-size: 14px;
}

.meta-item {
    margin-right: 15px;
    margin-bottom: 5px;
}

/* 分隔线 */
.divider {
    height: 1px;
    background-color: #ebeef5;
    margin: 0 20px;
}

/* 费用信息描述 */
.fee-descriptions {
    padding: 15px 20px;
}

:deep(.el-descriptions__label) {
    color: #606266;
    font-weight: 500;
}

:deep(.el-descriptions__content) {
    color: #303133;
}

/* 操作按钮区域 */
.action-buttons {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ebeef5;
}

.action-buttons .el-button {
    padding: 8px 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .detail-drawer {
        size: '70%';
    }

    .shop-name {
        font-size: 16px;
    }
}
</style>